<template>
    <div class="ym">
        <div class="top">
            <div class="top-left">
                <ul>
                    <li> Call Us: +98 54321 67890</li>
                    <li> Call Us: +98 54321 67890</li>
                </ul>
            </div>
            <div class="top-right">
                <ul>
                    <li>
                        <a href="####">F</a>
                    </li>
                    <li>
                        <a href="####">bird</a>
                    </li>
                    <li>
                        <a href="####">IN</a>
                    </li>
                    <li>
                        <a href="####">@</a>
                    </li>
                </ul>
            </div>
            <div class="clear"></div>
        </div>
        <hr/>
        <div class="header">
            <!-- 图片 -->
            <div class="header-img">
                <a href="####">
                <img src="@/assets/12-7作业图片/1.png">
                </a>
            </div>
            <!-- header-ul -->
            <div class="header-ul">
                <ul>
                    <li v-for="(value,index) in headul" :key="index">
                        <a href="###">
                    {{ headul[index] }}
                        </a>
                    </li>
                </ul>
            </div>
            <!-- head button -->
            <div class="headbtn">
                <button>
                    <span>Shop Now</span>
                </button>
            </div>
            <div class="clear"></div>
        </div>
        <div class="main">
            <div class="main-div1">
                <div class="main-div1-text">
                    <h5>30% off for limited time</h5>

                    <h1>Best Fashionable Digital Watch.</h1>

                    <p>
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium ligula.
                    </p>
                    <div class="main-div1-text-div">
                    <button>
                        <span>
                            <a href="####">
                            Shop Now
                            </a>
                        </span>
                    </button>
                    <span class="main-div1-text-div-span">
                        Strating at $199
                    </span>
                    </div>
                </div>
                <!-- img -->
                <div class="main-div1-img">
                    <div class="main-div1-img-div">
                        <img src="@/assets/12-7作业图片/21.png" alt="">
                    </div>
                </div>

                <div class="clear"></div>
            </div>
            <!-- 第二个 -->
            <div class="main-div2">
                <div class="main-div2-left">
                    <img src="@/assets/12-7作业图片/3.png" alt="">
                </div>
                <!-- div2-text -->
                <div class="main-div2-right">
                   <h6>About the product</h6>
                   <h2>Awesome digital watch can make your life easier</h2>
                   <p>
                       Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis.Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
                   </p>
                   <ul class="main-div2-right-left">
                       <li v-for="(value,index) in main2left" :key="index">
        {{ main2left[index] }}
                       </li>
                   </ul>

                    <ul class="main-div2-right-right">
                       <li v-for="(value,index) in main2right" :key="index">
        {{ main2right[index] }}
                       </li>
                   </ul>
                </div>

                <div class="clear"></div>
            </div>
            <!-- 第三个 -->
            <div class="main-div3">
                <div class="main-div3-top">
                    <h6>
                        Core Features
                    </h6>
                    <h2>
                        The watch has lots of excellent features
                    </h2>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic explicabo voluptas nisi iste reiciendis, tempore commodi necessitatibus, laborum laudantium.
                    </p>
                </div>
                <div class="main-div3-bottom">
                    <div v-for="(value,index) in 6" :key="index">
                        <h3>Attractive Design</h3>
                        <p>Donec nec justo eget felis facilisis fer. Mentum liquam porttitor mauris sit.</p>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="clear"></div>
            </div>
            <div class="main-div4">
                <div class="main-div4-top">
                    <h6>
                        Product Demo
                    </h6>
                    <h2>
                        Get product more information from the video
                    </h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic explicabo voluptas nisi iste reiciendis, tempore commodi necessitatibus, laborum laudantium.</p>
                </div>
                <div class="main-div4-video">
                    <div class="video">
                        <img src="@/assets/12-7作业图片/1.jpg" alt="">
                    </div>
                </div>
            </div>
            <div class="main-div5">
                <div class="main-div5-left">
                    <h6>Limited time offer</h6>
                    <h2>
                        Discount 50% on all MX20 Model Product
                    </h2>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic explicabo voluptas nisi iste reiciendis, tempore commodi necessitatibus, laborum laudantium.
                    </p>
                </div>
                <div class="main-div5-right">
                    <img src="@/assets/12-7作业图片/4.png" alt="">
                </div>
                <div class="clear"></div>
            </div>
            <div class="main-div6">
                <div class="main-div6-top">
                    <h6>Testimonials</h6>
                    <h2>Our Customers Feedback</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic explicabo voluptas nisi iste reiciendis, tempore commodi necessitatibus, laborum laudantium.</p>
                </div>
                <div class="main-div6-sa">
                    <div class="main-div6-sa-div">
                        <p>"Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis."</p>
                        <p>⭐⭐⭐⭐⭐</p>
                        <div class="div6-img">
                            <img src="@/assets/12-7作业图片/2.jpg" alt="">
                            <h4>Adam Smith</h4>
                            <p>Affiliate Marketer</p>
                        </div>
                        
                    </div>
                    <!-- 第二个 -->
                     <div class="main-div6-sa-div">
                        <p>"Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis."</p>
                        <p>⭐⭐⭐⭐⭐</p>
                        <div class="div6-img">
                            <img src="@/assets/12-7作业图片/3.jpg" alt="">

                            <h4>Shane Kyle</h4>
                            <p>Product Designer</p>
                        </div>
                        
                    </div>
                    <!-- 第三个 -->
                     <div class="main-div6-sa-div">
                        <p>"Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis."</p>
                        <p>⭐⭐⭐⭐⭐</p>
                        <div class="div6-img">
                            <img src="@/assets/12-7作业图片/4.jpg" alt="">
                            <h4>Jhon Doe</h4>
                            <p>Content Writer</p>
                        </div>
                        
                    </div>

                </div>

            </div>
            <div class="main-div7">
                <div class="main-div7-top">
                    <h6>Newsletter</h6>
                    <h2>Subscribe Our Newsletter</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic explicabo voluptas nisi iste reiciendis, tempore commodi necessitatibus, laborum laudantium.</p>
                </div>
                <div class="main-div7-input">
                    <input type="text" placeholder="   Enter Your Email">
                    <button>Submit</button>
                </div>
            </div>
            <el-col :span="24">
                <div id="product" class="product_area">
                    <div class="areadiv">
               <h6>OUR PRODUCTS</h6>
               <h2>Our excellent and high quality products.</h2>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic explicabo voluptas nisi iste reiciendis, tempore commodi necessitatibus, laborum laudantium.</p>
             
                        <div class="threes">
                            <div class="prod-img">
                      <img src="@/assets/12-7作业图片/5.png" class="img-fluid" alt="">
                            </div>
                            <div class="prod-info three">
                                    <h4>Olimus Blue</h4>
                                    <span class="star-rating"><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i></span>
                                    <h5>$169</h5>
                                    <a href="#">Buy Now</a>
                            </div>
                        </div>
                        <div class="threes">
                            <div class="prod-img">
                      <img src="@/assets/12-7作业图片/6.png" class="img-fluid" alt="">
                            </div>
                            <div class="prod-info three">
                                    <h4>Olimus Blue</h4>
                                    <span class="star-rating"><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i></span>
                                    <h5>$169</h5>
                                    <a href="#">Buy Now</a>
                                </div>
                            </div>
                            <div class="threes">
                                <div class="prod-img">
                      <img src="@/assets/12-7作业图片/7.png" class="img-fluid" alt="">
                                </div>
                                <div class="prod-info three">
                                    <h4>Olimus Blue</h4>
                                    <span class="star-rating"><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i><i class="fa fa-star" aria-hidden="true"></i></span>
                                    <h5>$169</h5>
                                    <a href="#">Buy Now</a>
                                </div>
                            </div>
                       <!-- jieshu -->
                        </div>
                </div>                
            </el-col>
      <!-- Frequently -->
      
            <div class="main-div8">
                <div class="main-div8Z">
                    <div class="main-div8-left">
                        <img src="@/assets/12-7作业图片/5.jpg" alt="">
                    </div>
                    <div class="main-div8-right">
                        <h6>Why choose our product</h6>
                        <h2>Choose Our Best & fashionable Products</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic explicabo voluptas nisi iste reiciendis, tempore commodi necessitatibus, laborum laudantium.</p>

                        <ul>
                            <li v-for="(value,index) in main8right" :key="index">
                                <h4>
                            {{
                                main8right[index]
                            }}
                                    
                                </h4>
                            </li>
                        </ul>
                    </div>
                </div>
                
            </div>
            <div class="main-div9">
                <div class="main-div9-div">
                    <ul>
                        <li v-for="(value,index) in 3" :key="index">
                            <h4>
                            {{ main9h4[index] }}
                            </h4>
                            <p>
                             {{ main9p[index] }}   
                            </p>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="main-div10">
                <div class="main-div10box">
                    <div class="main-div10-top">
                        <h6>Need Help</h6>
                        <h2>Contact with us</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic explicabo voluptas nisi iste reiciendis, tempore commodi necessitatibus, laborum laudantium in.</p>
                    </div>
                    <div class="main-div10-input">
                        <div class="main-div10-input-left">
                            <div v-for="(value,index) in main10input" :key="index" class="main-div10-input-div">
                                <label for="name">
                            {{ main10input[index] 
                            }}        
                                </label>
                                <input type="text" placeholder="Name" required="required">
                            </div>
                            <button>
                                Submit Now
                            </button>
                        </div>
                        <div class="main-div10-input-right">
                            <div class="main-div10-input-right-div1">
                                <div class="main10-right-div2">
                                    <h5>
                                     Address:
                                    </h5>
                                    <p>
                                 Maount View, Oval Road 
                            <br>           New York, USA
                                    </p>
                                </div>
                                <div class="main10-right-div2">
                                    <h5>
                                      Email:
                                    </h5>
                                    <p>
                                 support@email.com
                            <br>        example@support.com
                                    </p>
                                </div>
                                <div class="main10-right-div2">
                                    <h5>
                                       Phone:
                                    </h5>
                                    <p>
                                 +91 12345 67890
                            <br>         +93 12345 67890
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 底部 -->
        <div class="foot">
            <div class="foots">
                <div class="foots-left">
                    <div class="foots-left-img">
                        <img src="@/assets/12-7作业图片/1.png" alt="">
                        <p>
                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros.
                        </p>
                    </div>

                    <div class="foots-left-ul1">
                        <ul>
                            <li>
                                <a href="####">
                                    Contact Us
                                </a>
                            </li>
                            <li>
                                <a href="####">
                                   Customer Service
                                </a>
                            </li>
                            <li>
                                <a href="####">
                                 Term & Condition  
                                </a>
                            </li>
                            <li>
                                <a href="####">
                                    FAQs  
                                </a>
                            </li>
                        </ul>
                    </div>

                    <div class="foots-left-ul2">
                        <ul>
                            <li>
                                <a href="####">
                                    Our Products
                                </a>
                            </li>
                            <li>
                                <a href="####">
                                    Refund Policy
                                </a>
                            </li>
                            <li>
                                <a href="####">
                                    Payment Methods
                                </a>
                            </li>
                            <li>
                                <a href="####">
                                    Privacy & Policy
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="foots-right">
                    <input type="text" placeholder="   Ente">

                    <h5>Follow Us</h5>
                    <ul>
                        <li>
                            <a href="####">
                                F
                            </a>
                        </li>
                        <li>
                            <a href="####">
                               鸟 
                            </a>
                        </li>
                        <li>
                            <a href="####">
                                G
                            </a>
                        </li>
                        <li>
                            <a href="####">
                                IN
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="clear"></div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            headul:["Home","Features","Review","Product","Faq","Contact"],
            main2left:["GPRS Tracking","Install Any App","Notification Alart"],
            main2right:["Attractive Design","Instant Video Call","User Live Chat"],
            main8right:["Our all products are high quality, colorful and fashionable.",
            "Lifetime guarantee is available for all new & old products",
            "Easy and high secured payment system with multiple gateway.",
            "We are providing 24 hours dedicated support for our customers"],
            main9h4:["Free Shipping","100% Guarantee","Secured Payment"],
            main9p:["No hidden or extra charge","No hidden or extra charge","No hidden or extra charge"],
            main10input:["Name*","Email*","Message*"]
        }
    }
}
</script>
<style>
*{
    margin: 0;
    padding: 0;
}
.ym {
    justify-content: center;
    width: 1399px;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
}
h6 {
    font-size: 16px;
    line-height: 26px;
    color: #ff6348;
    text-transform: uppercase;
    font-weight: 600;
}
h2 {
    font-size: 50px;
    line-height: 60px;
    font-weight: 700;
    text-transform: capitalize;
    color: #0c2461;
}


.clear{clear: both;}
.top {
    width: 80%;
    margin: 0 auto;
}
/* top-left */
.top-left {
    float: left;
    padding-top: 15px;
    padding-bottom: 15px;
}
.top-left ul li {
    float: left;
    margin-left: 50px;
    color: blue;
}
/* top-right */
.top-right {
    float:right;
    padding-top: 15px;
    padding-bottom: 15px;
}
.top-right ul li {
    float: left;
    margin-left: 20px;  
}
.top-right ul li a {
    color:black;
}
/* heade */

.header {
    width: 80%;
    padding-left: 10%;
    padding-right: 10%;
    margin: auto;
    padding-top: 30px;
    position: sticky;
    top: 51px;
    background: white;
}

/* header-img */
.header-img {
    float: left;
    margin-right: 5%;
}

/* header-ul */
.header-ul li {
    float: left;
    margin-left: 40px;
    
}
.header-ul li a {
    color: black;
    font-size: 20px;    
}

/* header-btn */
.headbtn {
    float: right;
}
.headbtn button {
    width: 150px;
    height: 50px;
    background: rgb(255,99,72);
    border-radius: 10px;
}
.headbtn button span {
    font-size:18px;
    color: white;
}


/* main */
.main {
    width: 100%;
}
/* main-div1 */
.main-div1{
    margin: 0 auto;
    padding-top: 180px;
    padding-bottom: 80px;
    padding-left: 50px;
    background:rgb(251,215,181);
}
.main-div1-text {
    width: 45%;
    float: left;
}
.main-div1-text h5 {
    font-weight: 600;
    color: #fb4f31;
    margin-bottom: 20px;
    font-size: 20px;
    line-height: 30px;
}
.main-div1-text h1 {
    line-height: 75px;
    font-weight: 700;
    margin-bottom: 20px;
    font-size: 70px;
    color: rgb(12,36,97);
}
.main-div1-text p {
    font-size: 20px;
    line-height: 30px;
    color: rgb(12,36,97);
}
.main-div1-text button {
    width: 180px;
    height: 55px;
    border-radius: 10px;
    background: rgb(255,99,72);
}
.main-div1-text button span a {
    color: white;
    font-size: 20px;
}
.main-div1-text-div {
    margin-top: 50px;
}
.main-div1-text-div-span {
    margin-left:15px;
    font-size: 24px;
    color:rgb(12,36,105);
    font-weight: 600;
}
/* img */
.main-div1-img {
    float: right;
    width: 45%;
}


/* 第二个图 */
.main-div2 {
    width: 80%;
    margin: 0 auto;
}
.main-div2-left {
    float: left;
    width:45%;
    margin-top: 40px;
}
.main-div2-left img {
    width: 540px;
}

/* main2-right */
.main-div2-right {
    width:45%;
    float:right;
}
.main-div2-right h6 {
    color: #ff5740;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 16px;
    line-height: 26px;
}
.main-div2-right h2 {
    font-weight: 700;
    text-transform: capitalize;
    margin-bottom: 20px;
    font-size: 50px;
    line-height: 60px;
}
.main-div2-right p {
    font-size: 18px;
    line-height: 30px;
    font-weight: 400;
    color: #3c6382;
}
.main-div2-right-left {
    float: left;
    width: 50%;
}
.main-div2-right-right {
    float: right;
    width: 50%;
}
.main-div2-right ul li {
    padding: 6px 0;
    font-size: 20px;
    text-transform: capitalize;
    font-weight: 500;
    color: #3c6382;
}

/* main3 */
.main-div3 {
    width: 80%;
    background: rgb(246,243,234);
    padding-top: 180px;
}
.main-div3-top {
    margin: auto;
    width:50%;
    text-align: center;
    
}
.main-div3-top h6 {
    color: #ff6348;
    text-transform: uppercase;
    font-weight: 600;
}
.main-div3-top h2 {
    font-weight: 700;
    text-transform: capitalize;
    color: rgb(12,36,97);
}
.main-div3-top p {
    font-family: barlow,sans-serif;
    font-size: 18px;
    line-height: 30px;
    font-weight: 400;
    color: #3c6382;
}

/* main-div3-bottom */
.main-div3-bottom {
    width: 80%;
    margin: auto;
    padding-bottom: 100px;
}
.main-div3-bottom div {
    width: 31%;
    font-weight: 400;
    color: #3c6382;
    margin-top: 35px;
    float: left;
    margin-left: 2%;
}
.main-div3-bottom h3 {
    font-size: 25px;
    margin-bottom: 30px;
}

/* main-div4 */
.main-div4 {
    width: 80%;
    padding-top: 70px;
    padding-bottom: 80px;
}
.main-div4-top {
    width:60%;
    margin: auto;
    text-align: center;
}
.main-div4-top h6 {
    color: #ff6348;
    text-transform: uppercase;
    font-weight: 600;
}
.main-div4-top h2 {
    color:rgb(12,36,97);
    font-weight: 700;
   font-size:35px;
}
.main-div4-top p {
    font-family: barlow,sans-serif;
    font-size: 18px;
    line-height: 30px;
    font-weight: 400;
    color: #3c6382;
}

/* video */
.main-div4-video {
    width: 80%;
    margin: auto;
}
.video {
    width: 100%;
    margin: auto;
    text-align: center;
}
.video img {
    width: 70%;
}

/* div5 */
.main-div5{
    width: 100%;
    padding-top: 150px;
    padding-bottom: 100px;
    margin: auto;
    background: rgb(251,215,181);
}
.main-div5-left {
    width: 50%;
    float: left;
    text-align: center;
}
.main-div5-left h6 {
    color: #ff6348;
    text-transform: uppercase;
    font-weight: 600;
}
.main-div5-left h2 {
    color:rgb(12,36,97);
    font-weight: 700;
   font-size:35px;
}
.main-div5-left p {
    font-family: barlow,sans-serif;
    font-size: 18px;
    line-height: 30px;
    font-weight: 400;
    color: #3c6382;
}
.main-div5-right {
    float: right;
    width: 50%;
}
.main-div5-right img {
    width:70%;
}

/* main-div6 */
.main-div6 {
    width: 90%;
    margin: auto;
    padding: 95px 0 155px;
}
.main-div6-top {
    margin: auto;
    text-align: center;
    margin: 0 0 50px;
}
.main-div6-top p {
    font-family: barlow,sans-serif;
    font-size: 18px;
    line-height: 30px;
    font-weight: 400;
    color: #3c6382;
}
.main-div6-sa-div {
    display: inline-block;
    width: 25%;
    text-align: center;
    border: 3px solid #e6f0fa;
    padding: 50px 30px 40px;
    margin-left: 15px;
    border-radius: 20px;
}
.main-div6-sa-div p {
    font-family: barlow,sans-serif;
    font-size: 18px;
    line-height: 30px;
    font-weight: 400;
    color: #3c6382;
}
.main-div6-sa div img {
    width: 100px;
    border-radius: 50%;
    margin: 0 auto;
}
.div6-img {
    text-align: center;
    margin-top: 30px;
}
.div6-img h4 {
    font-weight: 600;
    margin: 0;
    font-size: 28px;
    line-height: 38px;
    color: #3c6382;
}
.div6-img p {
    color: #3c6382;
    font-size: 16px;
    line-height: 26px;
}

















.main-div7 {
    width: 100%;
    background: rgb(246,243,234);
    padding: 95px 0 100px;
    
}
.main-div7-top {
    width: 50%;
    margin: auto;
    text-align: center;
    
}
.main-div7-top p {
    font-family: barlow,sans-serif;
    font-size: 18px;
    line-height: 30px;
    font-weight: 400;
    color: #3c6382;
    margin: 0 0 50px;
}
/* input */
.main-div7-input {
    margin: auto;
    width: 50%;
    text-align: center;
    position: relative;
} 
.main-div7-input input {
    width: 99%;
    height: 60px;
    border-radius: 25px;
}
.main-div7-input button {
    position: absolute;
    top:0;
    right: 0;
    height: 100%;
    width: 100px;
    background: rgb(255,99,72);
    color: white;
     border-radius: 25px;
}





.product_area {
  height: 1205px;
  background: #f6f3ea;
}
.areadiv{
  width: 1200px;
  height:100% ;
  margin-left: auto;
  margin-right: auto;
}
.areadiv h6{
  width: 780px;
  height: 26px;
  padding-top: 130px;
  text-align: center;
  color: #ff6348;
  margin-left: auto;
  margin-right: auto;
}
.areadiv h2{
  text-align: center;
  width:730px ;
  height:120px ;
   margin-left: auto;
  margin-right: auto;
  color: #0c2461;
  font-size: 50px;
}
.areadiv p{
   width:730px ;
   height:60px ;
   text-align: center;
   margin-left: auto;
   margin-top: 40px;
   margin-right: auto;
   color: #3c6382;
}
.threes{
  width: 357px;
  height: 651px;
  background: #fff;
  border-radius: 20px;
  float: left;
  margin-left: 30px;
}
.threes img{
  width: 230px;
  height: 309px;
  margin-top: 60px;
  margin-left: 60px;
}
.threes h4{
   height:35px;
   width: 100%;
   text-align: center;
   color: #0c2461;
  font-size: 26px;
  margin-top: 30px;

}
.threes h5{
   height:35px;
   width: 100%;
   text-align: center;
   color: #3B04Db;
  font-size: 16px;
  margin-top: 30px;

}
.threes a{
  display: inline-block;
   height:47px;
   width: 137px;
   text-align: center;
   background:#ff6348;
  text-align: center;
  line-height: 45px;
  color: white;
  margin-left: 110px;
  margin-top: 30px;

}



/* main-div8 */
.main-div8 {
    width: 100%;
    background: white;
    padding: 100px 0 60px;
}
.main-div8Z {
    width: 80%;
    margin: auto
}
.main-div8-left {
    width:50%;
    display: inline-block;
}
.main-div8-left img {
    width: 90%;
}

.main-div8-right {
    width: 50%;
    display: inline-block;
}
.main-div8-right p {
    font-family: barlow,sans-serif;
    font-size: 15px;
    line-height: 30px;
    font-weight: 400;
    color: #3c6382;
}
.main-div8-right>ul {
    margin-top: 30px;
}
.main-div8-right>ul>li{
    overflow: hidden;
    margin: 0 0 22px;
}
.main-div8-right>ul>li>h4 {
    font-weight: 500;
    font-size: 20px;
    line-height: 32px;
    color: #3c6382;
}

/* div9 */
.main-div9 {
    padding: 100px 0 95px;
    background: rgb(246,243,234);
}
.main-div9-div {
    width: 80%;
    margin: auto;
}
.main-div9-div>ul>li {
    width: 33%;
    display: inline-block;
}
.main-div9-div>ul>li h4 {
    font-size: 28px;
    line-height: 38px;
    font-weight: 600;
    margin: 0;
    color: #3c6382;
}
.main-div9-div>ul>li p {
    font-family: barlow,sans-serif;
    font-size: 18px;
    line-height: 30px;
    font-weight: 400;
    color: #3c6382;
}


.main-div10{
    
    padding: 95px 0 85px;
}
.main-div10box {
    width: 80%;
    margin: auto;
}
.main-div10-top {
    width: 60%;
    margin: 0 0 50px;
}
.main-div10-top>p {
    font-family: barlow,sans-serif;
    font-size: 18px;
    line-height: 30px;
    font-weight: 400;
    color: #3c6382;
}

.main-div10-input {
    width:100%;

}

.main-div10-input-left {
    width: 65%;
    display: inline-block;
}
.main-div10-input-div {
    width: 100%;
    margin-bottom: 8px;
}

.main-div10-input-div input {
    height: 50px;
    font-size: 15px;
    border-color: #daecfd;
    width: 100%;
    border: 1px solid #ced4da;
}
.main-div10-input-div label {
    color: #0c2461;
}
.main-div10-input-left button {
    background-color: #ff6348;
    padding: 15px 30px;
    color: #fff;
    border-radius: 4px;
    font-weight: 600;
    border: 0;
    font-family: barlow,sans-serif;
}

.main-div10-input-right {
    position: relative;
    width: 30%;
    padding-right: 15px;
    padding-left: 15px;
    float: right;
}
.main10-right-div2 {
    margin: 0 0 40px;
    font-weight: 400;
    color: #0c2461;
}
.main10-right-div2 h5 {
    font-weight: 600;
}
.main10-right-div2 p {
    font-family: barlow,sans-serif;
    font-size: 18px;
    line-height: 30px;
    font-weight: 400;
    color: #3c6382;
}





/* foot */
.foot {
    width: 100%;
    background: rgb(246,243,234);
}
.foots {
    width: 80%;
    margin: auto;
    padding-top: 50px;
    padding-bottom: 50px;
}
.foots-left {
    float: left;
    width: 60%;
    
}
.foots-left-img {
    float: left;
    width: 40%;
}
.foots-left-img img {
    width: 45%;
}
.foots-left-img p {
    font-family: barlow,sans-serif;
    font-size: 15px;
    line-height: 30px;
    font-weight: 400;
    color: #0c2461;
    padding-right: 20px;
}

.foots-left-ul1 {
    width: 30%;
    float: left;
}

.foots-left-ul1 li {
    margin-bottom: 15px;
}
.foots-left-ul1 li a {
    color: #0c2461;
}

.foots-left-ul2 {
    width: 30%;
    float: left;
}
.foots-left-ul2 li {
    margin-bottom: 15px;
}
.foots-left-ul2 li a {
    color: #0c2461;
    font-weight: 500;
}

.foots-right {
    float: left;
}
.foots-right input {
    height: 45px;
    width:240px;
    border-radius: 25px;
}
.foots-right ul {
    margin-top: 15px;    
}
.foots-right h5{
    font-size: 20px;
    line-height: 30px;
    color: #0c2461;
    margin-top: 15px;
}

.foots-right li {
    display: inline-block;
    margin-right: 25px;
}




/* @/assets/12-7作业图片/21.png */
</style>